<template>
    <div class="d-flex flex-column w-100  " style="height: 90%;margin-top: 30px;" >
        <div v-for="(item,index) in list" class="d-flex m-" style="width: 100%;height: 15%;font-family: 'OPPOSans-Regular';color: #E6FDFF;font-size: 20px;">
            <FakeLegend
            :color="[useOptions().colors.value[index]]"
            :text="['']"
            ></FakeLegend>
            <div style="width: 30%;text-align: center;">
                {{ item.name }}
            </div>
            <div style="width: 30%;text-align: center;" >
                {{ item.value }}
            </div>
        </div>
    </div>
     
</template>
    
<script setup lang='ts'>
import FakeLegend from '@/components/project/fakeLegend.vue';
import { useOptions } from '@/hook/useOptions';
const list =ref([
{
    name:'按时或提前完成',
    value:27                   
},
{
    name:'逾期完成',
    value:2
},{
    name:'逾期未完成',
    value:8
},
 {
    name:'正常进行未逾期',
    value:47
},
{
    name:'跨年度未完成',
    value:13
},

])

</script>
    
<style>
    
</style>